<template>
  <div class="overflow-y-auto p-4 space-y-4">
    <!-- 能源统计 -->
    <EnergyStatistics :system-id="systemId" />

    <div class="grid grid-cols-3 gap-3">
      <!-- 能源流程图 -->
      <div class="col-span-1 h-full min-h-[500px]">
        <EnergyFlowDiagram class="h-full" :system-id="systemId" />
      </div>

      <!-- 警报和系统状态 -->
      <div class="col-span-1 grid grid-rows-2 gap-6 h-full">
        <div class="row-span-1">
          <AlertsChart class="h-full" />
        </div>
        <div class="row-span-1">
          <SystemStatusInfo class="h-full" :system-id="systemId" />
        </div>
      </div>

      <!-- 基本信息 -->
      <div class="col-span-1 h-full">
        <BasicInfo class="h-full" :system-id="systemId" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, provide, watch } from "vue";
import EnergyStatistics from "./components/EnergyStatistics/index.vue";
import EnergyFlowDiagram from "./components/EnergyFlowDiagram/index.vue";
import AlertsChart from "./components/AlertsChart/index.vue";
import SystemStatusInfo from "./components/SystemStatusInfo/index.vue";
import BasicInfo from "./components/BasicInfo/index.vue";
import { getSystemDetail } from "./data";

const props = defineProps({
  systemId: {
    type: String,
    required: true
  }
});

// 共享系统详情数据，避免重复调用
const systemDetailData = ref<any>(null);
const loading = ref(false);

// 加载系统详情数据
const loadSystemDetail = async () => {
  if (!props.systemId || loading.value) return;
  
  loading.value = true;
  try {
    const data = await getSystemDetail(props.systemId);
    systemDetailData.value = data;
  } catch (error) {
    console.error('Overview 加载系统详情失败:', error);
  } finally {
    loading.value = false;
  }
};

// 监听 systemId 变化
watch(() => props.systemId, (newSystemId) => {
  if (newSystemId) {
    loadSystemDetail();
  }
}, { immediate: true });

// 提供共享数据给子组件
provide('systemDetailData', systemDetailData);
provide('systemDetailLoading', loading);
</script>
